export default {
  data() {
    return {
      container: null,
      stats: null,
      controls: null,
      camera: null,
      scene: null,
      renderer: null,
      light: null,
      bbox: null,
      rotating: true,
      modelUrl: '',
      content: null
    }
  },
  created() {
    if (WEBGL.isWebGLAvailable() === false) {
      document.body.appendChild(WEBGL.getWebGLErrorMessage());
    }
  },
  methods: {
    initGlbModel() {
      if (!this.modelUrl) {
        return false;
      }
      this.container = document.getElementById('modelBox')
      while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
      }
      // 获取节点的宽度和高度
      var width = this.container.clientWidth;
      var height = this.container.clientHeight;
      this.scene = new THREE.Scene();
      this.bbox = new THREE.Box3();

      this.scene.background = new THREE.Color(0xeeeeee);
      this.light = new THREE.HemisphereLight(0xbbbbff, 0x444422, 1.5);
      this.light.position.set(0, 1, 0);
      this.scene.add(this.light);
      var loader = new THREE.GLTFLoader();

      loader.load(this.modelUrl, function(gltf) {
        gltf.scene.scale.set(0.1, 0.1, 0.1)
        this.setContent(gltf.scene);
        this.scene.add(gltf.scene);
      }.bind(this), undefined, function(e) {
        console.error(e);
      });
      this.renderer = new THREE.WebGLRenderer({
        antialias: true
      });

      this.renderer.setSize(width, height);
      this.renderer.gammaOutput = true;
      this.container.appendChild(this.renderer.domElement);
      window.addEventListener('resize', this.onWindowResize, false);

      this.camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
      this.controls = new THREE.OrbitControls(this.camera);
      this.controls.enablePan = false;
      this.controls.enableZoom = true;
      this.controls.target.set(0, 0, 0);
      this.controls.update();
      this.loading = false
    },
    initObjModel() {
      if (!this.modelUrl) {
        return false;
      }
      this.container = document.getElementById('modelBox')
      // 获取节点的宽度和高度
      var width = this.container.clientWidth;
      var height = this.container.clientHeight;
      this.scene = new THREE.Scene();
      this.bbox = new THREE.Box3();

      this.scene.background = new THREE.Color(0xeeeeee);
      this.light = new THREE.HemisphereLight(0xbbbbff, 0x444422, 1.5);
      this.light.position.set(0, 1, 0);
      this.scene.add(this.light);
      var loader = new THREE.OBJLoader();

      loader.load(this.modelUrl, function(gltf) {
        this.setContent(gltf);
        this.scene.add(gltf);
      }.bind(this), undefined, function(e) {
        console.error(e);
      });

      this.renderer = new THREE.WebGLRenderer({
        antialias: true
      })

      this.renderer.setSize(width, height);
      this.renderer.gammaOutput = true;
      this.container.appendChild(this.renderer.domElement);
      window.addEventListener('resize', this.onWindowResize, false);

      this.camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);

      this.controls = new THREE.OrbitControls(this.camera);
      this.controls.enablePan = false;
      this.controls.enableZoom = true;
      this.controls.target.set(0, 0, 0);
      this.controls.update();
    },
    onWindowResize() {
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(width, height);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
    pauseRotation() {
      var modelBorder = document.getElementById("modelBorder");
      modelBorder.addEventListener("mouseenter", function(event) {
        this.rotating = false;
      });
      modelBorder.addEventListener("mouseleave", function(event) {
        this.rotating = true;
      });
      modelBorder.addEventListener('touchmove', function(e) {
        this.rotating = false;
      }, false);
      modelBorder.addEventListener('touchstart', function(e) {
        this.rotating = false;
      }, false);
      modelBorder.addEventListener('touchend', function(e) {
        this.rotating = true;
      }, false);

    },
    setContent(object) {
      object.updateMatrixWorld();

      const box = new THREE.Box3().setFromObject(object);
      const size = box.getSize(new THREE.Vector3()).length();
      const boxSize = box.getSize();
      const center = box.getCenter(new THREE.Vector3());

      object.position.x += object.position.x - center.x;
      object.position.y += object.position.y - center.y;
      object.position.z += object.position.z - center.z;

      this.camera.position.copy(center);
      if (boxSize.x > boxSize.y) {
        this.camera.position.z = boxSize.x * -2.85
      } else {
        this.camera.position.z = boxSize.y * -2.85
      }
      this.camera.lookAt(0, 0, 0);
    },
    removeAllModels() {
      if (!this.scene) {
        return
      }
      while (this.scene.children.length > 0) {
        const child = this.scene.children[0];
        this.scene.remove(child);
      }
    }
  },
}